<template>
    <el-dropdown ref="dropdown"
        class="physical-default-value-select"
        :class="{'is-disabled': app.dependencyInitializing}"
        popper-class="physical-default-value-select__popper"
        trigger="click"
        :hide-on-click="false"
        :disabled="app.dependencyInitializing"
    >
        <el-badge type="primary" is-dot v-if="model">
            <tnxel-icon class="link" value="bi bi-heart" :title="'默认值：' + model"/>
        </el-badge>
        <tnxel-icon class="link" value="bi bi-heart" :title="items[0].text" v-else/>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item v-for="item in items" :key="item.value" @click="selectItem(item)">
                    <tnxel-icon :class="{'text-primary': model === item.value}"
                        :value="model === item.value ? 'Select' : 'fa'"/>
                    <span :class="{'text-primary': model === item.value}">{{ item.text }}</span>
                </el-dropdown-item>
                <el-dropdown-item divided>
                    <tnxel-icon :class="{'text-primary': customized}" :value="customized ? 'Select' : 'fa'"/>
                    <span class="mx-1">自定义：</span>
                    <el-input v-model="customizedValue"
                        style="width: 150px;"
                        @keyup.enter="confirmCustomizedValue"
                    >
                        <template #append>
                            <tnxel-button type="primary" icon="Check" @click="confirmCustomizedValue"/>
                        </template>
                    </el-input>
                </el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>

<script>
import ModelingApp from '@/logic/modeling/entity/ModelingApp.js';
import {getDefaultValues} from '@/logic/modeling/util/database-physical-types.js';

const stringPhysicalTypes = ['varchar', 'char', 'text', 'varchar2'];

export default {
    name: 'PhysicalDefaultValueSelect',
    props: {
        modelValue: {
            type: String,
            default: '',
        },
        app: {
            type: ModelingApp,
            required: true,
        },
        type: { // 物理类型
            type: String,
            required: true,
        },
    },
    data() {
        return {
            model: this.modelValue,
            customizedValue: '',
        };
    },
    computed: {
        defaultValues() {
            return getDefaultValues(this.app.databaseVendor, this.type);
        },
        items() {
            let items = this.defaultValues.map(defaultValue => {
                return {
                    value: defaultValue,
                    text: defaultValue,
                }
            });
            items.unshift({
                value: '',
                text: '不指定默认值',
            });
            return items;
        },
        customized() {
            return this.model && !this.defaultValues.some(defaultValue => defaultValue === this.model);
        },
    },
    watch: {
        modelValue() {
            this.model = this.modelValue;
            this.syncCustomizedValue();
        },
        model() {
            this.$emit('update:modelValue', this.model);
        },
    },
    mounted() {
        this.syncCustomizedValue();
    },
    methods: {
        syncCustomizedValue() {
            if (this.customized) {
                this.customizedValue = this.model;
            }
        },
        selectItem(item) {
            this.model = item.value;
            this.$refs.dropdown.handleClose();
        },
        confirmCustomizedValue() {
            let value = this.customizedValue;
            if (stringPhysicalTypes.includes(this.type)) {
                if (!value.startsWith('\'') && !value.endsWith('\'')) {
                    value = '\'' + value + '\'';
                }
            }
            this.model = value;
            this.$refs.dropdown.handleClose();
        },
    }
}
</script>

<style lang="scss">
.physical-default-value-select__popper {
    .el-dropdown-menu__item {
        .el-input-group__append {
            padding-left: 16px;
            padding-right: 16px;

            .el-button {
                .el-icon {
                    margin-right: 0;
                }
            }
        }
    }
}
</style>
